// 个性定制
function dingzhi() {
    let mockData = Mock.mock({
        'bigimg1': "@image('1920x360',#eac7ce)",
        "couponlist|3": [{
            'cutprice': "5",
            'condition': "99",
            'expiredate': "2017.12.12~2017.12.12"
        }],
        "cuxiaolist|2": [{
            'name': '满500减100元',
            'date': '2017/12/25—2017/12/26',
            'prolist|10': [{
                'img': "@image('214x274',#eac7ce)",
                'title': "@ctitle(5, 10)",
                'sellprice|100-200.2': 239.00,
                'manjian|0-1': 0,
                'baoyou|0-1': 0
            }]
        }],
        'ml_color': [{
            'val': 1,
            'txt': '白色',
            'img': "@image('116x116',#ffffff)",
        }, {
            'val': 2,
            'txt': '粉色',
            'img': "@image('116x116',#FFE4E1)",
        }, {
            'val': 3,
            'txt': '浅蓝',
            'img': "@image('116x116',#E0FFFF)",
        }, {
            'val': 4,
            'txt': '米色',
            'img': "@image('116x116',#FDF5E6)",
        }]
    });
    dingzhi = new Vue({
        el: '#dingzhi',
        data() {
            return {
                liucheng: [{
                    'cls': 'i1',
                    'txt1': '提交定制信息',
                    'txt2': '款式、面料个性选择'
                }, {
                    'cls': 'i2',
                    'txt1': '邮寄面料',
                    'txt2': '免费邮寄面料，确认面料'
                }, {
                    'cls': 'i3',
                    'txt1': '在线下单',
                    'txt2': '在线支付，开始定制'
                }, {
                    'cls': 'i4',
                    'txt1': '极速生产',
                    'txt2': '品牌商家工业智能生产'
                }, {
                    'cls': 'i5',
                    'txt1': '极速送货',
                    'txt2': '确认收货做评价'
                }],
                'dztypes': [],
                'lingxing': [{
                    'val': 1,
                    'txt': '大驳领'
                }, {
                    'val': 2,
                    'txt': '小驳领'
                }, {
                    'val': 3,
                    'txt': '翻领'
                }],
                'kaicha': [{
                    'val': 1,
                    'txt': '后中'
                }, {
                    'val': 2,
                    'txt': '两侧'
                }],
                'mianliao': [{
                    'val': 1,
                    'txt': '毛料'
                }, {
                    'val': 2,
                    'txt': '混纺'
                }],
                'niukou': [{
                    'val': 1,
                    'txt': '单排'
                }, {
                    'val': 2,
                    'txt': '双排'
                }],
                'niukoucount': [{
                    'val': 1,
                    'txt': '2颗'
                }, {
                    'val': 2,
                    'txt': '3颗'
                }],
                'tixing': [{
                    'val': 1,
                    'txt': '偏瘦'
                }, {
                    'val': 2,
                    'txt': '适中'
                }, {
                    'val': 3,
                    'txt': '偏胖'
                }],
                'other_requires': [{
                    'ph': '体重',
                    'unit': 'KG'
                }, {
                    'ph': '身高',
                    'unit': 'CM'
                }, {
                    'ph': '肩宽',
                    'unit': 'CM'
                }, {
                    'ph': '袖长',
                    'unit': 'CM'
                }, {
                    'ph': '胸围',
                    'unit': 'CM'
                }, {
                    'ph': '腰围',
                    'unit': 'CM'
                }],
                'addresslist': [],
                'addressId': '',
                'buyNum': 1,
                'content': {},
                topnavlist: {},
                'customMaterial': '',

                'attributeGroup': [], //属性组
                'fabricGroupParams': {}, //面料组
                bigimg1: null,
                customInfo: {
                    sex: '', //性别
                    age: '', //年龄
                    type: '', //定制类型
                    lingxin: '', //领形
                    weizhi: '', //开叉位置
                    mianliao: '', //面料
                    imgUrl: '', //面料图片
                    niukou: '', //纽扣位置
                    niukouCount: '', //纽扣数量
                    tixing: '', //体型
                    tizhong: '', //体重
                    shengao: '', //身高
                    jiankuan: '', //肩宽
                    xiuchang: '', //袖长
                    xiongwei: '', //胸围
                    yaowe: '', //腰围
                    remark: '', //其他要求
                    payAmount: 0 //价格
                },

                sexList: [{ //性别
                    val: 0,
                    txt: '男'
                }, {
                    val: 1,
                    txt: '女'
                }],
                sexCurrent: "男", //选中的性别 文字
                age: "", //填入的年龄

                categoryParams: [], //页面初始化ajax获得的数据 用于显示

                customCurrent: 0, //选中的定制类型 数字 数组下标
                optionMsg: [ //选择的信息
                    /*{
                        radio:[0,0],//技术要求
                        fabric:[ [],[] ],//面料 可以多选
                    }*/
                ],
            }
        },
        components: {
            'check-group': check_group,
            'check-img-group': check_img_group,
            'address-group': address_group,
            'counter': counter
        },
        methods: {
            getData() {
                var _this = this;
                //this.bigimg1 = mockData.bigimg1;
                this.ml_color = mockData.ml_color;
                axios({
                    method: 'get',
                    url: urlParam.domain() + '/api/ad/adOnePC?adPostionId=37',
                    responseType: 'stream'
                }).then(function(response) {
                    _this.bigimg1 = response.data.data.list;
                });

                axios({
                    method: 'get',
                    url: urlParam.domain() + '/api/user/myAddress',
                    params: {
                        token: urlParam.token(),
                        pageSize: 10,
                    },
                    responseType: 'stream'
                }).then(result => {
                    var array = result.data.data;
                    if (array.length != 0) {
                        _this.addresslist = array;
                        _this.addressId = array[0].addressId;
                    }
                });
                //获取页面初始 选项
                axios({
                    url: urlParam.domain() + '/api/customization/customizationInfo',
                    method: 'get',
                    responseType: 'stream',
                }).then(result => {
                    var ajaxData = result.data.data.customizationParams.categoryParams;
                    console.log(ajaxData);
                    //初始化 optionMsg 用于存储用户的选择、填写信息
                    // for (var i = 0; i < ajaxData.length; i++) {
                    //     _this.optionMsg[i] = {};
                    //     //技术要求 单选
                    //     for (var j = 0; j < ajaxData.attributeGroupParams[0].attributeParams.length; j++) {
                    //         _this.optionMsg[i].radio[j] = 0;
                    //     }
                    // }
                    _this.categoryParams = result.data.data.customizationParams.categoryParams;
                })
            },
            //点击选择性别
            clickGender(item) {
                this.sexCurrent = item;
            },
            //点击定制类型 获取数据
            clickCustomType(index) {
                this.customCurrent = index;
            },
            //点击面料
            mianliao(item) {
                alert(JSON.stringify(item))
            },

            //点击提交
            btn_submint() {
                alert(this.buyNum + "," + this.addressId);
                /*
                axios({
                    url: urlParam.domain() + ' /api/customization/addCustomInfo',
                    method: 'post',
                    responseType: 'stream',
                    data: {
                        token: urlParam.token(),
                        addressId: this.addressId,
                        content: this.content,
                        customCount: this.buyNum,
                        customMaterial: this.customMaterial
                    }
                }).then(result => {
                    //定制商品编号
                    var customNumber = result.data.data;
                    console.log(customNumber);
                })
                */
            },
            getAddressId(id) {
                this.addressId = id;
            },
            getBuyNum(num) {
                this.buyNum = num;
            }
        },
        created() {
            this.getData();
        }
    })
}

// check-group:单项选择
let check_group = {
    props: ['list', 'val', 'txt'],
    template: `
    <div class="check-group">
        <span v-for="(item,index) in list" @click="checkone(item[val+''],index)" class="check-item" :class="{'active':item[val+''] == current}">{{item[txt]}}</span>
    </div>
    `,
    data() {
        return {
            current: this.list[0][this.val + ""]
        }
    },
    methods: {
        checkone(val, index) {
            this.current = val;
            //设置回调函数
            this.$emit('callback', index);
        }
    }
}

// check-img-group: 图片单项选择
let check_img_group = {
    props: ['list', 'val', 'txt'],
    template: `
    <div> 
        <div class="check-group">
            <span v-for="(item,index) in list" @click="checkone(index)" class="check-item" :class="{'active':index == current}">{{item[txt]}}</span>
        </div>
        <div class="check-img-group">
            <div v-for="(items,indexs) in list[current].fabricColorParams" @click="checkimg(indexs)" class="check-img-item" :class="{'active': indexs == imgIndex}">
                <img :src="items.imgUrl">
                <span class="check-item-txt">{{items.colorName}}</span>
            </div>
        </div>
    </div>
    `,
    data() {
        return {
            current: 0,
            imgIndex: 0,
        }
    },
    methods: {
        checkone(val) {
            this.current = val;

        },
        checkimg(val) {
            this.imgIndex = val;
        }

    },
}

// input-group: 地址选择框
// addresslist
let address_group = {
    props: ['list'],
    template: `
    <ul class="dz-con-list" v-if="list.length != 0">
        <li>
            <div class="address-list" v-for="item,index in list" v-if="index<maxIndex">
                <span @click="checkone(item.addressId)" class="name" :class="{'active':current==item.addressId}">
                <p>{{index==0 ? '【默认地址】' : ''}}{{item.userName}}</p>
                <p>{{item.provinceName}} {{item.cityName}} {{item.districtName}} {{item.userAdress}}</p>
                <p>{{item.userPhone}}</p>
                </span>
            </div>
            <div>
                <span @click="showmore" v-if="!showall">更多</span>
                <span @click="hide" v-else>收起</span>
            </div>
        </li>    
    </ul>
    `,
    data() {
        return {
            current: this.list[0] ? this.list[0].addressId : '',
            showall: false
        }
    },
    methods: {
        checkone(val) {
            this.current = val;
            //设置回调函数
            this.$emit('callback', this.current);
        },
        showmore() {
            this.showall = true;
        },
        hide() {
            this.showall = false;
        }
    },
    computed: {
        maxIndex() {
            if (this.showall) {
                return this.list.length;
            } else {
                return 1;
            }
        }
    }
}